﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
@section head{
    <link rel="stylesheet" type="text/css" media="screen" href="@Url.Content("~/Content/css/ui.jqgrid.css")" />
    <script src="@Url.Content("~/Scripts/utils/date.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jqgrid/CustomFunctions.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jqgrid/i18n/grid.locale-en.js")" type="text/javascript"></script>
    <script src="@Url.Content("~/Scripts/jqgrid/jquery.jqGrid.min.js")" type="text/javascript"></script>
}
<h2>
    Grid</h2>
<table id="grid">
</table>
<div id="pager">
</div>
<script type="text/javascript">
    $("#grid").jqGrid({
        url: '@Url.Action("GetData", "Grid")',
        datatype: "json",
        colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes', ''],
        colModel: [
            { name: 'idd', index: 'idd', width: 55, search: false, defval: 0,
                editable: false, editoptions: { defaultValue: "0" }
            },
            { name: 'invdate', formatter: 'date', formatoptions: { newformat: 'd-m-Y' }, sorttype: 'date', index: 'invdate', width: 90, jsonmap: 'invdate',
                searchoptions:
                {
                    attr: { title: 'Equal' },
                    sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
                    dataInit: function (el) {
                        $(el).datepicker({ dateFormat: 'dd-mm-yy', buttonImageOnly: true, showOn: 'both', buttonImage: '@Url.Content("~/Content/Images/calendar.gif")', onSelect:
                                function () {
                                    $('#gs_invdate').focus().trigger({ type: 'keypress', charCode: 13 });
                                }
                        }).width(80);
                    }
                },
                searchrules:
                {
                    custom: true,
                    custom_func: checkDate
                },
                editable: true, edittype: 'custom', editoptions: { custom_element: createDate, custom_value: getSetDate },
                editrules: { required: true, custom: true, custom_func: checkDate },
                formoptions: { elmprefix: '(*)' }
            },
            { name: 'name', index: 'name', width: 100, jsonmap: 'name',
                searchoptions:
                {
                    attr: { title: 'Contains' },
                    sopt: ['cn', 'nc', 'eq', 'ne', 'bw', 'bn', 'ew', 'en', ]
                },
                editable: true, edittype: 'text', editrules: { required: true },
                formoptions: { elmprefix: '(*)' }
            },
            { name: 'amount', formatter: 'number', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '-' },
                index: 'amount', width: 80, align: "right", jsonmap: 'amount', sorttype: 'int',
                searchoptions:
                {
                    attr: { title: 'Greater or equal' },
                    sopt: ['eq'],
                    dataUrl: '@Url.Action("GetAmountValues", "Grid")'
                }, stype: 'select',
                editable: true, edittype: 'select',
                editoptions: { dataUrl: '@Url.Action("GetAmountValues", "Grid", new { noAll = true })' },
                formoptions: { elmprefix: '(*)' }
            },
            { name: 'tax', formatter: 'number', sorttype: 'float', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '-' },
                index: 'tax', width: 80, align: 'right', jsonmap: 'tax',
                searchoptions:
                {
                    attr: { title: 'Greater or equal' },
                    sopt: ['ge', 'gt', 'eq', 'ne', 'lt', 'le', ]
                }, searchrules: { number: true, minvalue: 0 },
                editable: true, edittype: 'text',
                editrules: { required: true, number: true, minValue: 0 },
                formoptions: { elmprefix: '(*)' }
            },
            { name: 'total', formatter: 'number', sortype: 'float', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '-' },
                index: 'total', width: 80, align: 'right', jsonmap: 'total',
                searchoptions:
                {
                    attr: { title: 'Greater or equal' },
                    sopt: ['ge', 'gt', 'eq', 'ne', 'lt', 'le', ]
                }, searchrules: { number: true, minvalue: 0 },
                editable: true, edittype: 'text',
                editrules: { required: true, number: true, minValue: 0 },
                formoptions: { elmprefix: '(*)' }
            },
            { name: 'note', index: 'note', width: 150, jsonmap: 'note',
                searchoptions:
                {
                    attr: { title: 'Contains' },
                    sopt: ['cn', 'nc', 'eq', 'ne', 'bw', 'bn', 'ew', 'en']
                },
                editable: true, edittype: 'text', editrules: { required: true },
                formoptions: { elmprefix: '(*)' }
            },
            { name: 'myac', width: 50, fixed: true, sortable: false, resize: false, formatter: 'actions', search: false, formatoptions: { keys: true}}],
        rowNum: 10,
        rowList: [10, 20, 30],
        pager: 'pager',
        sortname: 'idd',
        viewrecords: true,
        sortorder: "desc",
        height: '100%',
        caption: "Grid title",
        jsonReader: { repeatitems: false, id: "0" },
        width: 800,
        hidegrid: false,
        editurl: '@Url.Action("Edit", "Grid")',
        cellurl: '@Url.Action("Edit", "Grid")',
        subGrid: true,
        subGridRowExpanded: detailsGrid,
        footerrow : true, 
        userDataOnFooter : true,
    });

    jQuery("#grid").jqGrid('navGrid', '#pager',
    { edit: true, add: true, del: true }, //options
    {modal: true, top: 100, left: 100, bottominfo: 'Fields marked with (*) are required' }, //edit options
    {modal: true, top: 100, left: 100, bottominfo: 'Fields marked with (*) are required' }, //add options
    {}, //del options
    {multipleSearch: true, multipleGroup: true} // search options
    );
    jQuery("#grid").jqGrid('filterToolbar', { autosearch: true, stringResult: true, groupOp: 'AND' });

    function createDate(value, options) {
        var div = document.createElement('span');
        var el = document.createElement("input");
        el.type = "text";
        el.value = value;
        $(div).append(el);

        $(el).datepicker({ dateFormat: 'dd-mm-yy', showOn: 'button', buttonImageOnly: true, buttonImage: '@Url.Content("~/Content/Images/calendar.gif")' });

        return div;
    }

    function getSetDate(elem, operation, value) {
        if (operation === 'get') {
            return $(elem).find("input").val();
        } else if (operation === 'set') {
            $('input', elem).val(value);
        }
    }

    function detailsGrid(subgrid_id, row_id) {
        var subgrid_table_id, pager_id;
        subgrid_table_id = subgrid_id + "_t";
        pager_id = "p_" + subgrid_table_id;
        $("#" + subgrid_id).html("<table id='" + subgrid_table_id + "' class='scroll'></table><div id='" + pager_id + "' class='scroll'></div>");

        jQuery("#" + subgrid_table_id).jqGrid({
            url: '@Url.Action("GetDataDetails", "Grid")' + '?id=' + row_id,
            datatype: "json",
            colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes', ''],
            colModel: [
            { name: 'idd2', index: 'idd2', width: 55, search: false, defval: 0,
                editable: false, editoptions: { defaultValue: "0" }
            },
            { name: 'invdate', formatter: 'date', formatoptions: { newformat: 'd-m-Y' }, sorttype: 'date', index: 'invdate', width: 90, jsonmap: 'invdate',
                searchoptions:
                {
                    attr: { title: 'Equal' },
                    sopt: ['eq', 'ne', 'lt', 'le', 'gt', 'ge'],
                    dataInit: function (el) {
                        $(el).datepicker({ dateFormat: 'dd-mm-yy', buttonImageOnly: true, showOn: 'both', buttonImage: '@Url.Content("~/Content/Images/calendar.gif")', onSelect:
                                function () {
                                    $('#gs_invdate').focus().trigger({ type: 'keypress', charCode: 13 });
                                }
                        }).width(80);
                    }
                },
                searchrules:
                {
                    custom: true,
                    custom_func: checkDate
                },
                editable: true, edittype: 'custom', editoptions: { custom_element: createDate, custom_value: getSetDate },
                editrules: { required: true, custom: true, custom_func: checkDate },
                formoptions: { elmprefix: '(*)' }
            },
            { name: 'name', index: 'name', width: 100, jsonmap: 'name',
                searchoptions:
                {
                    attr: { title: 'Contains' },
                    sopt: ['cn', 'nc', 'eq', 'ne', 'bw', 'bn', 'ew', 'en', ]
                },
                editable: true, edittype: 'text', editrules: { required: true },
                formoptions: { elmprefix: '(*)' }
            },
            { name: 'amount', formatter: 'number', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 0, defaultValue: '-' },
                index: 'amount', width: 80, align: "right", jsonmap: 'amount', sorttype: 'int',
                searchoptions:
                {
                    attr: { title: 'Greater or equal' },
                    sopt: ['eq'],
                    dataUrl: '@Url.Action("GetAmountValues", "Grid")'
                }, stype: 'select',
                editable: true, edittype: 'select',
                editoptions: { dataUrl: '@Url.Action("GetAmountValues", "Grid", new { noAll = true })' },
                formoptions: { elmprefix: '(*)' }
            },
            { name: 'tax', formatter: 'number', sorttype: 'float', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '-' },
                index: 'tax', width: 80, align: 'right', jsonmap: 'tax',
                searchoptions:
                {
                    attr: { title: 'Greater or equal' },
                    sopt: ['ge', 'gt', 'eq', 'ne', 'lt', 'le', ]
                }, searchrules: { number: true, minvalue: 0 },
                editable: true, edittype: 'text',
                editrules: { required: true, number: true, minValue: 0 },
                formoptions: { elmprefix: '(*)' }
            },
            { name: 'total', formatter: 'number', sortype: 'float', formatoptions: { decimalSeparator: '.', thousandsSeparator: ',', decimalPlaces: 2, defaultValue: '-' },
                index: 'total', width: 80, align: 'right', jsonmap: 'total',
                searchoptions:
                {
                    attr: { title: 'Greater or equal' },
                    sopt: ['ge', 'gt', 'eq', 'ne', 'lt', 'le', ]
                }, searchrules: { number: true, minvalue: 0 },
                editable: true, edittype: 'text',
                editrules: { required: true, number: true, minValue: 0 },
                formoptions: { elmprefix: '(*)' }
            },
            { name: 'note', index: 'note', width: 150, jsonmap: 'note',
                searchoptions:
                {
                    attr: { title: 'Contains' },
                    sopt: ['cn', 'nc', 'eq', 'ne', 'bw', 'bn', 'ew', 'en']
                },
                editable: true, edittype: 'text', editrules: { required: true },
                formoptions: { elmprefix: '(*)' }
            },
            { name: 'myac', width: 50, fixed: true, sortable: false, resize: false, formatter: 'actions', search: false, formatoptions: { keys: true}}],
            rowNum: 10,
            rowList: [10, 20, 30],
            pager: pager_id,
            sortname: 'idd2',
            viewrecords: true,
            sortorder: "desc",
            height: '100%',
            width: 770,
            caption: "Grid details title",
            jsonReader: { repeatitems: false, id: "0" },
            hidegrid: false,
            editurl: '@Url.Action("Edit2", "Grid")',
            cellurl: '@Url.Action("Edit2", "Grid")',
            footerrow : true, 
            userDataOnFooter : true,
        });
        jQuery("#" + subgrid_table_id).jqGrid('navGrid', '#' + pager_id,
            { edit: true, add: true, del: true }, //options
            {modal: true, top: 100, left: 100, bottominfo: 'Fields marked with (*) are required' }, //edit options
            {modal: true, top: 100, left: 100, bottominfo: 'Fields marked with (*) are required' }, //add options
            {}, //del options
            {multipleSearch: true, multipleGroup: true} // search options
            );
        jQuery("#" + subgrid_table_id).jqGrid('filterToolbar', { autosearch: true, stringResult: true, groupOp: 'AND' });
    }

</script>
